<template>
    <el-card shadow="never" class="page_card" :body-style="{ padding: '0' }">
        <el-container class="crm-table-container">
            <el-header class="navbar">
                <el-form :inline="true" ref="form" size="mini" class="elForm">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-edit" size="small" @click="openSide = !openSide">展开侧边栏</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-edit" size="small">编辑</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="info">回信</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="info">上一个</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="info">下一个</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="warning" icon="el-icon-search" size="small">标记</el-button>
                    </el-form-item>


                    <el-form-item label="">
                        <el-button type="danger" icon="el-icon-delete" size="small">删除</el-button>
                    </el-form-item>

                    <el-form-item label="" class="float-right">
                        <el-button type="primary" size="mini">
                            <d2-icon name="search" />
                            查询
                        </el-button>
                    </el-form-item>

                    <el-form-item label="" class="mr-2 float-right">
                        <el-input placeholder="标题" class="w-80" />
                    </el-form-item>
                </el-form>
            </el-header>
            <el-container class="elContainer">
                <transition name="el-zoom-in-left">
                    <el-aside width="150px" class="transition-box" v-show="openSide">
                        <el-card shadow="never" class="elCard" :body-style="{ padding: '0' }">
                            <ul class="infinite-list p-0">
                                <li v-for="o in 4" :key="o" class="text-center infinite-list-item list-inline p-2 bg-light"> {{'列表内容 ' + o }}</li>
                            </ul>
                        </el-card>
                    </el-aside>
                </transition>
                <el-container>
                    <el-main class="elMain-son">
                        <el-table stripe height="86%" ref="multipleTable" :data="tableData" tooltip-effect="dark" class="elTable">
                            <el-table-column type="selection" width="55">
                            </el-table-column>

                            <el-table-column label="UserId" width="100">
                                <template slot-scope="scope">
                                    <i class="el-icon-star-off"></i>
                                    <span class="ml-10">{{ scope.row.name }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column label="Tag" width="70">
                                <template slot-scope="scope">
                                    <el-tag type="scuccess" effect="dark" size="mini">
                                        Work
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="name" label="Content" width="200" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span class="ml-10">{{ scope.row.content }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column label="" width="40">
                                <template slot-scope="scope">
                                    <i class="fa fa-paperclip" aria-hidden="true"></i>
                                </template>
                            </el-table-column>

                            <el-table-column prop="address" label="日期" width="120">
                                <template slot-scope="scope">
                                    <span class="ml-10">{{ scope.row.date }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button type="success" size="mini" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-arrow-down"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <!-- <el-card> -->
                            <el-pagination class="elPage bg-white pl20" @size-change="handleSizeChange" :current-page="1" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                            </el-pagination>
                        <!-- </el-card> -->
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </el-card>
</template>
<script>
    export default {
        name: "crm-table",
        data() {
            return {
                tableData: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    content: "Pastorpedia - Free Article and Video - onmissioninsights.com"
                }, {
                    date: '2016-05-03',
                    name: '李小龙',
                    address: '上海市普陀区金沙江路 1518 弄',
                    content: "Pastorpedia - Free Article and Video - onmissioninsights.com"
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    content: "Pastorpedia - Free Article and Video - onmissioninsights.com"
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    content: "Pastorpedia - Free Article and Video - onmissioninsights.com"
                }],
            }
        },
    }
</script>